<style scoped>
.row{background: #fff;margin-top: 10px;padding: 8px 14px;}
.id_card_img{
  --s94-upload-size: 160px;
  --s94-upload-background: var(--color-primary);
  --s94-upload-upload-icon-size: 160px;
}
.row .red{color: var(--van-danger-color);}
.row .tips{font-size: 0.8em;}
.row-2 img{background: var(--color-primary);margin: 8px 0;width: 100%;}
.row-4 p{margin-bottom: 14px;}
</style>
<template>
  <HeaderSlot>
    <van-nav-bar :title="$t('实名认证')" left-arrow @click-left="href_handle(-1)" />
  </HeaderSlot>
  <div class="row">
    <p>请拍摄并上传你的有效身份证：</p>
    <div class="flex" style="justify-content: space-between;">
      <s94_upload class="id_card_img" v-model="form_data.id_card_front" max="1" :upload_icon="img_src_1" :is_info="is_info"/>
      <s94_upload class="id_card_img" v-model="form_data.id_card_back" max="1" :upload_icon="img_src_2" :is_info="is_info"/>
    </div>
  </div>

  <div class="row row-2">
    <p>拍摄身份证要求：</p>
    <p class="tips">大陆公民持有的本人有效二代身份证</p>
    <p class="tips">拍摄时确保身份证<span class="red">边框完整，字体清晰，亮度均匀</span></p>
    <img-referrer src="//mmbiz.qpic.cn/mmbiz_png/Gt1ibmdWFkeoibl8icBjtVUlaWMS56SBCru28ndZHUhs4XZasyfV9Y2PdPtduYQ9iaqVBxafHQicp5muM2GSVgNtAbA/640?wx_fmt=png&amp;from=appmsg"/>
  </div>

  <div class="row">
    <p>请确认你的身份信息：</p>
    <van-field v-model="form_data.name" label="姓名" placeholder="请输入姓名" :readonly="is_info" />
    <van-field v-model="form_data.id_card" label="身份证号" placeholder="请输入身份证号" :readonly="is_info" />
  </div>

  <div class="row row-4">
    <p class="red" v-if="real_name_info.status==0">审核中，请稍候</p>
    <p class="red" v-if="real_name_info.status==2">认证失败：{{real_name_info.admin_note}}</p>
    <p class="red" v-if="real_name_info.status==3">认证过期：截至到 {{real_name_info.expiration_time}}</p>
    <van-button v-if="!is_info" round block type="primary" text="提交申请" @click="submit()" class="submit_button"/>
    <van-button v-else-if="~[2,3].indexOf(real_name_info.status)" round block text="重新申请" @click="is_info=false" class="submit_button"/>
  </div>
</template>

<script>
import {ajax} from "@/js/api_tool.js";
import {href_handle} from "@/vue_plugin/router_auto.js";
import s94_upload from "@/components/widget/s94_upload.vue";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

export default {
  components: {ImgReferrer, HeaderSlot, s94_upload},
  data(){
    return {
      is_info: false,
      img_src_1: '//s94-cd.oss-cn-chengdu.aliyuncs.com/uploads/2025/0225/163255793574.png',
      img_src_2: '//s94-cd.oss-cn-chengdu.aliyuncs.com/uploads/2025/0225/163256270080.png',
      form_data: {
        id_card_front: '',
        id_card_back: '',
        name: '',
        id_card: '',
      },
      real_name_info: {status: -1},
    }
  },
  methods:{
    href_handle,
    init(){
      ajax('/home/user/real_name_info', res=>{
        if (!res.data) {
          this.is_info = false;
        }else {
          this.real_name_info = res.data;
          Object.keys(this.form_data).forEach(k=>{
            this.form_data[k] = res.data[k];
          })
          this.status = res.data.status;
          this.is_info = true;
        }
        return false;
      })
    },
    submit(){
      ajax({url:'/home/user/real_name_add', data:this.form_data, method:'POST'}, res=>{
        this.init();
      })
    },
  },
  computed:{},
  mounted(){
    this.init();
  }
}
</script>